<template>
  <div>
    <el-dialog v-model="dialogVisible" title="添加服务" width="500" :before-close="handleClose">
      <span>
        <!-- 表格 -->
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          row-key="id"
          @selection-change="multipleSelection"
        >
          <el-table-column type="selection" width="55" :reserve-selection="true" />
          <el-table-column label="服务名称" property="name" />
          <el-table-column label="服务描述" property="content" />
        </el-table>
        <div class="page">
          <el-pagination
            v-model:current-page="params.page"
            v-model:page-size="params.pageSize"
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- <ELTable v-bind="tableConfig" ref="multipleTableRef" @multipleSelection="multipleSelection" /> -->
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ListData, ListParams } from "../../../../api/market/service/type";
import type { FormInstance, TableInstance } from "element-plus";
import { getServiceList } from "../../../../api/market/service/service";
import { ElMessage } from "element-plus";

const router = useRouter();
const emit = defineEmits(["close"]);

const multipleTableRef = ref<TableInstance>();

//dialog默认显示
const dialogVisible = ref(true);

const serviceList = ref<ListData[]>([]);

//服务列表
const tableData = ref<ListData[]>([]);

const props = defineProps(["selectList"]);

if (props.selectList) {
  serviceList.value = props.selectList;
}

//选中
const multipleSelection = (data: ListData[]) => {
  let ids = tableData.value.map((item) => item.id);

  serviceList.value = serviceList.value.filter((item) => !ids.includes(item.id));

  serviceList.value = [...serviceList.value, ...data];
};

//取消
const handleClose = () => {
  emit("close");
};
//确定
const submit = () => {
  emit("close", serviceList.value);
};

const params = reactive<ListParams>({
  page: 1,
  pageSize: 2,
});

const handleCurrentChange = (val: number) => {
  params.page = val;
  getData();
};

//总条数
const total = ref(0);
const getData = async () => {
  let res = await getServiceList(params);
  tableData.value = res.list;
  total.value = res.counts;

  nextTick(() => {
    let ids = props.selectList.map((item: any) => item.id);
    tableData.value
      .filter((item) => ids.includes(item.id))
      .forEach((element) => {
        multipleTableRef.value?.toggleRowSelection(element, true);
      });
  });
};

onMounted(() => {
  // console.log("77766",tableConfig.loadData);

  getData();
});
</script>

<style scoped>
.el-input {
  width: 130px;
}

.page {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
